<template>
  <div class="layout">
    <div class="wrapper">
      <div class="nav"></div>
      <div class="left-side">
        <div class="card">
          <div class="article-author"></div>
          <div class="article-content">
            <div class="article-title" v-if="community?.postTitle">
              <h1>{{ community.postTitle }}</h1>
            </div>
            <div class="content" v-if="community?.postContent">
              <p>{{ community.postContent }}</p>
            </div>
            <a
              :href="img"
              data-fancybox="gallery"
              v-for="img in community?.coverList"
            >
              <img v-if="checkImage(img)" :src="img" />
              <video v-else :src="img"></video>
            </a>
          </div>
        </div>
        <xz-comment></xz-comment>
      </div>
      <div class="right-side">
        <div class="author-card">
          <div class="card-info-bg"></div>
          <div class="card-info-avatar">
            <div class="avatar-img">
              <img
                class="fit-cover"
                src="https://img.hoshinagi.top/blog/avatar.avif"
              />
            </div>
          </div>
          <div class="card-info-desc">
            <div class="author-info-name">
              {{ community?.name }}
            </div>
            <div class="author-info-data is-center">
              <a>
                <div class="data-count">{{ community?.postNum }}</div>
                <div class="data-text">投稿</div>
              </a>
              <a>
                <div class="data-count">{{ community?.likes }}</div>
                <div class="data-text">获赞</div>
              </a>
            </div>
            <button
              id="quick-link-btn"
              @click="handleFollow"
              style="
                background-color: var(--xz-theme);
                border: none;
                color: white;
                padding: 10px 20px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 4px 2px;
                margin-top: 1rem;
                cursor: pointer;
                border-radius: 8px;
              "
            >
              {{ community?.isFollow ? "取消关注" : "关注" }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCommunity } from "@/api/post";
import { onMounted, ref } from "vue";
import appStore from "@/store/app";
import { message } from "@/utils/message";
import { follow } from "@/api/user";
import { useRoute } from "vue-router";

const community = ref<Community | null>(null);

const store = appStore();

const route = useRoute();

const checkImage = (cover: string) => {
  return /\.(jpg|jpeg|png|gif|svg|webp)$/i.test(cover);
};

const handleFollow = async () => {
  if (!localStorage.getItem("token")) {
    message({
      type: "error",
      message: "请先登录",
      duration: 2000,
    });
    store.openSign();
    return;
  }
  if (community.value) {
    const result = await follow(community.value.uid, community.value.isFollow);
    if (result.data.code === 200) {
      message({
        type: "success",
        message: result.data.msg,
        duration: 2000,
      });
      await getCommunityInfo();
    }
  }
};

const handleParseImage = (imgs: string) => {
  return imgs.split(",").filter(Boolean);
};

const getCommunityInfo = async () => {
  const result = await getCommunity(+route.query.postId!);
  community.value = result.data.data;
  if (community.value) {
    community.value.coverList = handleParseImage(community.value.cover!);
  }
};

onMounted(async () => {
  await getCommunityInfo();
  // const result = await getCommunity(+route.query.postId!);
  // community.value = result.data.data;
  // if (community.value) {
  //   community.value.coverList = handleParseImage(community.value.cover!);
  // }
});
</script>

<style scoped lang="scss">
.wrapper {
  width: 1283px !important;
  margin: 0 auto;
  position: relative;
  display: flex;
  padding: 1rem;

  .nav {
    margin-bottom: 1rem;
  }

  .left-side {
    width: calc(100% - 300px);
  }

  .right-side {
    width: 300px;
    margin-left: 1rem;
    background-color: var(--xz-card-bg);
  }
}

.right-side {
  height: fit-content;
  position: sticky;
  top: calc(80px + 1rem);

  .author-card {
    width: 100%;
    position: relative;
    padding-bottom: 1rem;

    .card-info-bg {
      min-height: 100px;
      background-size: 400%;
      background: var(--xz-theme);
    }

    .card-info-avatar {
      background-color: var(--xz-card-bg);
      width: 114px;
      height: 114px;
      right: calc(50% - 57px);
      top: 35px;
      border-top-left-radius: 500px;
      border-top-right-radius: 500px;
      border-bottom-right-radius: 500px;
      border-bottom-left-radius: 500px;
      position: absolute;
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.69, 0.39, 0, 1.21);
      transition-delay: 0s;
      transition-property: all;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      .avatar-img {
        overflow-x: hidden;
        overflow-y: hidden;
        border-top-left-radius: 500px;
        border-top-right-radius: 500px;
        border-bottom-right-radius: 500px;
        border-bottom-left-radius: 500px;
        width: 100px;
        cursor: pointer;
        height: 100px;

        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          transition: 0.3s;
        }
      }
    }

    .card-info-desc {
      display: flex;
      align-items: center;
      flex-direction: column;

      .author-info-name {
        margin-top: 60px;
        text-align: center;
        font-weight: 700;
        color: var(--xz-fontcolor);
        font-size: 20px;
        line-height: 1;
        margin-bottom: 5px;
      }

      .author-info-data {
        display: table;
        width: 100%;
        table-layout: fixed;
        margin-top: 12px;
        margin-right: 0px;
        margin-bottom: 4px;
        padding-top: 0px;
        padding-right: 20px;

        a {
          position: relative;
          display: table-cell;

          .data-count {
            margin-top: -0.32em;
            color: var(--xz-fontcolor);
            font-size: 1.4em;
            line-height: 1.5;
          }

          .data-text {
            color: var(--xz-fontcolor);
            font-size: 1em;
            line-height: 1.5;
          }
        }

        a:not(:last-child)::after {
          opacity: 0.3;
          position: absolute;
          top: 6px;
          right: 0px;
          content: "";
          width: 1px;
          height: 40px;
          background: var(--xz-main);
        }
      }
    }
  }
}

.card {
  padding: 20px;
  background: var(--xz-card-bg);
}
</style>
